import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-demo21',
  templateUrl: './demo21.component.html',
  styles: [
    `
      h3 {
        margin: 0.16rem 0 0.08rem 0;
      }
    `,
  ],
})
export class Demo21Component implements OnInit {
  data;
  columns = [];
  constructor() {}

  ngOnInit() {
    this.initColumns();
    this.initData();
  }

  initColumns() {
    this.columns = [
      { key: 'name', label: 'Name' },
      { key: 'status', label: 'Status' },
      { key: 'type', label: 'Provisioning Type' },
      { key: 'wwn', label: 'WWN', width: '300px' },
      { key: 'mapping', label: 'Mapping Status' },
      { key: 'storage', label: 'Storage Device' },
      { key: 'service', label: 'Service Level' },
      { key: 'protection', label: 'Protection Status' },
    ];
  }

  initData() {
    this.data = Array.from({ length: 2 }).map((item, key) => {
      return this.initMock(key);
    });
  }

  initMock(key: number) {
    return {
      name: `LUN_00${key}`,
      status: 'Normal',
      type: 'Thin',
      wwn: '611e7b0cc54a825cf6f9ce9000014292',
      mapping: 'Mapped',
      storage: `V6-0${key}`,
      port: `8.46.185.224`,
      service: `Tier0`,
      protection: 'Text',
    };
  }
}
